<template>
  <div>
    <h1 class="page-header">{{ titles }}</h1>
    <div class="row placeholders">
      <div
        class="col-xs-6 col-sm-3 placeholder"
        v-for="(item, index) in hobbies"
        :key="item"
      >
        <img
          src=""
          width="200"
          height="200"
          class="img-responsive"
          alt="Generic placeholder thumbnail"
        />
        <h4>{{ item }}</h4>
        <span class="text-muted" @click="remove(index)"
          ><a href="javascript:;">删除</a></span
        >
        <!-- <span class="text-muted" @click="del(index)"
          ><a href="javascript:;">删除</a></span
        > -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 3.在子组件准备props属性接收父组件传过来的数据
  props: ["hobbies", "titles", "remove"], //就是相当于data  写法一：数组的写法
  // props: {//就是相当于data  写法二：对象的写法
  //   hobbies: Array,
  //   titles: String
  // },
  // props: {
  //   //写法三：对象里面写对象
  //   hobbies: {
  //     type: Array,
  //     required: true
  //   },
  //   titles: {
  //     type: String,
  //     required: true,
  //     default: "周杰伦"
  //   }
  // },
  data() {
    return {};
  },

  components: {},

  methods: {
    del(index) {
      this.remove(index);
    }
  }
};
</script>

<style scoped>
</style>